<template>
  <div class="workbench-planninglist" v-loading="loading">
    <div class="workbench-title">
      <!--{{ $t("public.contactPlan") }}-->
      <div class="top-choose">
      <span class="top-day" ds-attr='create' v-bind:class = "{top_active: activeSlip=='create'}" v-on:click.stop="active('create')">{{$t('workbench.myCustomerPlan')}}</span>
      <span class="top-month" style="margin-left: 40px" ds-attr='executor' v-bind:class = "{top_active: activeSlip=='executor'}" v-on:click.stop="active('executor')">{{$t('workbench.myExcutorPlan')}}</span>
    </div>
    </div>
    <div class="workbench-planninglist-content">
      <ul class="planninglist-table">
        <li v-for="list in planningListNew" :key="list._id">
          <span class="planninglist-icon" v-bind:class="list.result.type"></span>
          <el-row class="border-col">
            <div class="planninglist-time">
              <span class="planninglist-time-right">{{list.time}}</span>
            </div>
            <div class="planninglist-customer" @click.stop="plan(list._id,list.customer)">
              {{list.customer}}
          </div>
            <div class="planninglist-remark" v-text="list.remark">
            </div>
          </el-row>
        </li>
      </ul>
      <div v-show="planningListNew.length === 0" class="no-plan">{{$t('workbench.noPlan')}}</div>
    </div>
    <pagination
      :small="true"
      :currentPage="currentPage"
      :count="count"
      :pageSize = 10
      @turnPage="turnPage"
      :customerShow="true"
      :newStyle="true">
    </pagination>
  </div>
</template>
<script>
  //    import Workbench from './components/workbench/workbench.vue'
  import {getNotifyDate} from '@/utils/customerUtils.js'
  import {timeFormat} from '@/utils/m7Utils'
  import Pagination from '@components/public-modules/card/Pagination'
  import * as typesGl from '@/store/mutation-types.js'
  export default {
    name: 'workbenchplanninglist',
    data () {
      return {
        activeSlip: 'create',
        count: 0,
        planningListNew: [],
        currentPage: 1,
        loading: false
      }
    },
    components: {
      Pagination
    },
    computed: {
    },
    methods: {
      active (date) {
        this.currentPage = 1
        if (date === 'create') {
          this.activeSlip = 'create'
          this.fetchData()
        } else {
          this.activeSlip = 'executor'
          this.fetchData('executor')
        }
      },
      turnPage (val) {
        this.currentPage = val
        if (this.activeSlip === 'create') {
          this.fetchData()
        } else {
          this.fetchData('executor')
        }
      },
      fetchData (type) {
        this.loading = true
        let _obj = {
          page: this.currentPage,
          limit: 10
        }
        if (type) {
          _obj.status = 'executor'
        }
        this.$store.dispatch('queryWorkbenchesDateData', _obj).then((res) => {
          this.loading = false
          if (res.success) {
            let arr = []
            let _data = res.data
            for (let i = 0; i < _data.list.length; i++) {
              let item = _data.list[i]
              let obj = {}
              obj.time = timeFormat(item.notifyTime, '')
              obj.remark = item.action
              obj.customer = item.name
              obj._id = item._id
              obj.result = item.notifyTime ? getNotifyDate(item.notifyTime) : ''
              arr.push(obj)
            }
            this.planningListNew = arr
            this.count = _data.count || 0
          }
        })
      },
      initData () {
        this.currentPage = 1
        if (this.activeSlip === 'create') {
          this.fetchData()
        } else {
          this.fetchData('executor')
        }
      },
      plan (_id, name) {
        // 判断是否有客户权限
        let power = this.$store.state.session.clientMenu || []
        let isPower = power.some((item) => {
          if (item.id === 'nav_customer') {
            return true
          }
        })
        if (!isPower) {
          return
        }
        let _obj1 = {
          module: 'customer',
          random: Math.random()
        }
        this.$router.push({path: '/index/customer/', query: {active: 'customer_plan', id: _id, selectVal: this.activeSlip === 'create' ? '' : 'executor'}})
        this.$store.commit(typesGl.NOTICECUSTOMER, _obj1)
      }
    },
    created () {
      this.initData()
    }
  }
</script>
<style scoped lang="stylus">
  @import '../../../assets/common.styl'
  @import "styl/_workbench.styl"
  .workbench-title
    color $cf-gray2
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-direction: normal;
    flex-direction: column;
    .top-choose
      span
        display  block
        float  left
        margin-left  10px
        min-width  28px
        height  40px
        cursor pointer
    .top_active
      color $c-main
      box-sizing  border-box
      border-bottom  3px solid $c-main
  .workbench-planninglist
    position relative
    float  left
    width  calc(42% - 12px)
    margin  5px
    border  1px solid #e7e7eb
    height  405px
    background  $cf-white
  .workbench-planninglist-content
    height calc(100% - 70px)
    overflow auto
  .workbench-planninglist-content li
    color $cf-gray3
    position relative
    line-height 16px
  .planninglist-table
    padding  30px 15px 15px 20px
    font-size  12px
    line-height  12px
    li
      &:last-of-type
        .planninglist-icon:after
          content  ""
          width  0
          height  0
  .planninglist-icon
    display  block
    width  11px
    height  11px
    border-radius  50%
    position  absolute
    float  left
    left -5px
    z-index 2
    top 1px
  .planninglist-icon:after
    content  ""
    display  block
    position  absolute
    width  1px
    height  16px
    left  5px
    top  11px
    // background-color  #e8e8e8
  .today-action
    background-color #ccc
  .overdue
    background-color $c-pink
  .usable
    background-color #98cb5a
  .planninglist-time-right
    width 100%
    padding-left 22px
    color $cf-gray6
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
    float left
  .planninglist-time
    width calc(31% - 15px)
    padding-right  15px
    position  relative
    float  left
    margin-left -10px
    // border-left 1px solid #e8e8e8
    box-sizing  border-box
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .planninglist-time1
    width 15px
    padding-right  15px
    position  relative
    float  left
    box-sizing  border-box
  .planninglist-customer
    width 20%
    padding-right  18px
    float  left
    box-sizing  border-box
    cursor pointer
    color $cf-color1
    text-overflow ellipsis
    overflow hidden
    white-space nowrap
  .planninglist-remark
    width 49%
    float  left
    color $cf-gray2
    line-height 16px
  .no-plan
    color $cf-gray3
    padding-left 20px
  .planninglist-table
    .border-col
      border-left: 1px solid #e8e8e8
      padding-bottom 3px
      min-height: 29px
    li:last-child
      .border-col
        border-left: none
  </style>
